<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram 4.16.1</title>
</head>
<body>

<canvas id="myCanvas" width="600" height="300"></canvas>

<script>
// Get canvas and context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// --- Define parameters ---
const s = 80; // Size of a square
const gap = 70; // Gap for ellipsis
const totalDiagramWidth = 4 * s + gap;
const startX = (canvas.width - totalDiagramWidth) / 2;
const startY = 80;

const bottomY = startY + s;
const centerY = startY + s / 2;
const endX = startX + totalDiagramWidth;

// --- Drawing styles ---
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// --- Draw the main structure (squares) ---
ctx.beginPath();
// Square 1
ctx.rect(startX, startY, s, s);
// Square 2
ctx.rect(startX + s, startY, s, s);
// Square N-1
ctx.rect(startX + 2 * s + gap, startY, s, s);
// Square N
ctx.rect(startX + 3 * s + gap, startY, s, s);
ctx.stroke();

// --- Draw the ellipsis ---
ctx.beginPath();
const dotRadius = 1.5;
const dotXCenter = startX + 2*s + gap / 2;
const dotSpacing = 12;

// Top dots
ctx.arc(dotXCenter - dotSpacing, startY, dotRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.arc(dotXCenter, startY, dotRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.arc(dotXCenter + dotSpacing, startY, dotRadius, 0, 2 * Math.PI);
ctx.fill();

// Bottom dots
ctx.arc(dotXCenter - dotSpacing, bottomY, dotRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.arc(dotXCenter, bottomY, dotRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.arc(dotXCenter + dotSpacing, bottomY, dotRadius, 0, 2 * Math.PI);
ctx.fill();


// --- Draw the numbers and labels ---
const fontSize = 24;
const labelFontSize = 22;

// Labels A and B
ctx.font = `${labelFontSize}px Times New Roman`;
ctx.fillText("A", startX, bottomY + 20);
ctx.fillText("B", endX, startY - 15);

// Number 1
const center1X = startX + s / 2;
ctx.font = `${fontSize}px Times New Roman`;
ctx.fillText("1", center1X, centerY);

// Number 2
const center2X = startX + s + s / 2;
ctx.fillText("2", center2X, centerY);

// Number N-1
const centerN1X = startX + 2 * s + gap + s / 2;
ctx.font = `italic ${fontSize}px Times New Roman`;
const wN = ctx.measureText("N").width;
ctx.font = `${fontSize}px Times New Roman`;
const w_minus_1 = ctx.measureText("−1").width; // Use minus sign for correct appearance
const totalN1Width = wN + w_minus_1;
const startN1X = centerN1X - totalN1Width / 2;

ctx.textAlign = "left"; // Align left for precise placement of composite label
ctx.font = `italic ${fontSize}px Times New Roman`;
ctx.fillText("N", startN1X, centerY);
ctx.font = `${fontSize}px Times New Roman`;
ctx.fillText("−1", startN1X + wN, centerY);
ctx.textAlign = "center"; // Reset alignment

// Number N
const centerNX = startX + 3 * s + gap + s / 2;
ctx.font = `italic ${fontSize}px Times New Roman`;
ctx.fillText("N", centerNX, centerY);


// --- Draw the caption ---
const captionFontSize = 22;
ctx.font = `${captionFontSize}px SimHei`; // A common font for Chinese characters
ctx.fillText("电图 4.16.1", canvas.width / 2, canvas.height - 40);

</script>

</body>
</html>